<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />-->

    <title>数据质量管理平台</title>

    <link rel="icon" type="image/png" sizes="16x16" href="/static/img/favicon.ico" />
    <!-- Bootstraore CSS -->
    <link rel="stylesheet" href="/static/css/lib/bootstrap/bootstrap.min.css" />
    <!-- Custom CSS-->
    <link rel="stylesheet" href="/static/css/helper.css" />
    <link rel="stylesheet" href="/static/css/style.css" />

    <!-- Jquery -->
    <script src="/static/js/jquery/jquery.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="/static/js/jquery/jquery.slimscroll.js"></script>

    <!-- Bootstrap tether Core JavaScript -->
    <script src="/static/js/bootstrap/js/popper.min.js"></script>
    <script src="/static/js/bootstrap/js/bootstrap.min.js"></script>

    <!--Menu sidebar -->
    <script src="/static/js/sidebarmenu.js"></script>
    <!--stickey kit -->
    <script src="/static/js/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <script src="/static/js/custom.min.js"></script>

    <!-- Echarts js如果放在二级模板延迟加载,会出现始化空白 -->
    <!--<script src="/static/js/Echarts/echarts.min.js"></script>-->

    <!-- 自定义的弹窗组件 -->
    <script src="/static/js/components/modal.js"></script>

    <script src="/static/js/init.js"></script>
</head>

<style>
    iframe {
        width: 100%;
        height: 100%;
    }
    .page-wrapper {
        position: relative;
        overflow: hidden !important;
    }
    .page-loading {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 99999;
    }
    .page-loading .circular {
        position: static;
        margin: unset;
    }
    .nav-label {
        clear: both;
        display: block;
        font-family: open sans;
        font-size: 14px !important;
        font-weight: 600;
        line-height: 20px;
        width: 100%;
        padding: 8px !important;
        color: #d0d0d0 !important;
    }
    .nav-label-home {
        color: #fff;
        clear: both;
        display: block;
        font-family: open sans;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        width: 100%;
        padding-left: 15px;
        padding-top: 10px;
    }
    hr {
        border-color: hsla(0,0%,100%,.12);
    }
    .message-center {
        height: auto !important;
    }
    .btn-circle {
        padding: unset;
        padding-top: 7px;
    }
    #avatar {
        width: 40px;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        font-size: 16px;
    }
    .page-wrapper {
        overflow: auto;
    }
    .page-wrapper .card {
        box-shadow: none;
    }
    .table-loading {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: hsla(0,0%,100%,.9);
        transition: opacity .3s;
        z-index: 2000;
    }
    .sidebar-nav > ul > li.active > a {
        border-left: none !important;
    }
    .modal-header {
        padding: 6px 20px !important;
    }
    .modal-title {
        font-size: 18px !important;
    }
    .close:not(:disabled):not(.disabled) {
        padding: 20px !important;
    }
    .ztree * {
        font-size: 14px !important;
    }
    .ztree li, .curSelectedNode {
        height: 20px !important;
        line-height: 20px !important;
    }
    .ztree li span.button.ico_docu, .ztree li span.button.edit, .ztree li span.button.remove {
        margin-top: 1px !important;
    }
</style>

<body class="fix-header fix-sidebar" onload="init();">
<!-- 加载图 spinners.css -->
<div class="preloader">
    <svg class="circular" viewBox="25 25 50 50">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
</div>

<div id="main-wrapper">
    <div class="header">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <!-- 左上角Logo -->
            <div class="navbar-header">
                <a class="navbar-brand" href="../../authorize/home/">
                    <span style="margin-left:-30px;color:#fff;">数据质量管理平台</span>
                </a>
            </div>

            <!-- 顶栏 -->
            <div class="navbar-collapse" style="height:50px;">
                <ul class="navbar-nav mr-auto mt-md-0">
                    <!-- 点击展开/隐藏侧边栏  -->
                    <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted  "
                                             href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
                    <li class="nav-item m-l-10"> <a class="nav-link sidebartoggler hidden-sm-down text-muted  "
                                                    href="javascript:void(0)"><i class="ti-menu"></i></a> </li>
                </ul>

                <ul class="navbar-nav my-lg-0">
                    <!-- Begin 提示 -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle text-muted text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bell"></i>
                            <div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right mailbox animated zoomIn">
                            <ul>
                                <li>
                                    <div class="drop-title">系统通知</div>
                                </li>
                                <li>
                                    <div class="message-center">
                                        <!-- Message -->
                                        <a href="#">
                                            <div class="btn btn-danger btn-circle m-r-10"><i class="fa fa-commenting"></i></div>
                                            <div class="mail-contnet">
                                                <span class="mail-desc"></span> <span class="time"></span>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <!-- End 提示 -->

                    <!-- Begin 用户 -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle text-muted  " href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <div id="avatar"></div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right animated zoomIn">
                            <ul class="dropdown-user">
                                <li><a href="../../authorize/logout"><i class="fa fa-power-off"></i> 退出登录</a></li>
                            </ul>
                        </div>
                    </li>
                    <!-- End 用户 -->
                </ul>
            </div>
        </nav>
    </div>

    <!-- 侧边栏 -->
    <div class="left-sidebar">
        <div class="scroll-sidebar">
            <nav class="sidebar-nav">
                <ul id="sidebarnav">
                    <li>
                        <a href="#/data/dashboard/" aria-expanded="false" url="/data/dashboard/">
                            <i class="fa fa-home"></i>
                            <span class="hide-menu">首页</span>
                        </a>
                    </li>
                    <li id="quality" class="nav-label">质检模型</li>

                    <hr></hr>

                    <!-- 标准管理 -->
                    <li class="nav-label">标准管理</li>
                    <li>
                        <a href="#/datastandard/show" aria-expanded="false" url="/datastandard/show">
                            <i class="fa fa-check-square-o"></i>
                            <span class="hide-menu">数据标准</span>
                        </a>
                    </li>

                    <!--<li>-->
                        <!--<a href="#/blood/analyze" aria-expanded="false" url="/blood/analyze">-->
                            <!--<i class="fa fa-sitemap"></i>-->
                            <!--<span class="hide-menu">血缘分析</span>-->
                        <!--</a>-->
                    <!--</li>-->
                    <!--<hr></hr>-->

                    <!-- 知识管理 -->
                    <!--<li class="nav-label">知识管理</li>-->
                    <!--<li>-->
                        <!--<a href="#/files/list" aria-expanded="false" url="/files/list">-->
                            <!--<i class="fa fa-book"></i>-->
                            <!--<span class="hide-menu">数据治理知识库</span>-->
                        <!--</a>-->
                    <!--</li>-->
                    <!--<hr></hr>-->

                    <!-- 后台管理 -->
                    <li class="nav-label">后台管理</li>
                    <li>
                        <a href="#/backend/database" aria-expanded="false" url="/backend/database">
                            <i class="fa fa-database" style="width: 27px;"></i>
                            <span class="hide-menu">数据源</span>
                        </a>
                    </li>

                    <li>
                        <a href="#/backend/menu" aria-expanded="false" url="/backend/menu">
                            <i class="fa fa-database" style="width: 27px;"></i>
                            <span class="hide-menu">质检模型配置</span>
                        </a>
                    </li>

                    <li>
                        <a class="has-arrow" href="#" aria-expanded="false">
                            <i class="fa fa-tv"></i>
                            <span class="hide-menu">任务调度</span>
                        </a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="#/check/crontab" url="/check/crontab"> 检核任务 </a></li>
                            <li><a href="#/backend/crontab" url="/backend/crontab"> 后台任务 </a></li>
                        </ul>
                    </li>

                    <!--<li>-->
                        <!--<a href="../../data/report" aria-expanded="false">-->
                            <!--<i class="fa fa-file-text" style="width: 27px;"></i>-->
                            <!--<span class="hide-menu">生成Word报告模板</span>-->
                        <!--</a>-->
                    <!--</li>-->

                    <!--<li>-->
                        <!--<a class="has-arrow" href="../../demand/import_sheet" target="_blank" aria-expanded="false">-->
                            <!--<i class="fa fa-tags"></i>-->
                            <!--<span class="hide-menu">更新源系统改造需求进度表</span>-->
                        <!--</a>-->
                    <!--</li>-->
                </ul>
            </nav>
        </div>
    </div>
    
    <!-- 主题内容 -->
    <div class="page-wrapper">
        <div class="page-loading">
            <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
            </svg>
        </div>
        <!--<iframe src="" frameborder="0"></iframe>-->
    </div>

    <script>
        let company = '';

        $(document).ready(function () {
            getQuality().then(() => {
                initIframe();
                changeMenu();
                initCheckedMenu();
                $("#sidebarnav").metisMenu();
            });
        });

        function getQuality() {
            return new Promise((resolve, reject) => {
                $.ajax({
                    type: "POST",
                    async: true,
                    url: "../../api/backend/menu/query",
                    data: JSON.stringify({ menu_validity: 1 }),
                    contentType: 'application/json',
                    success: function (result) {
                        if (result.stat !== 200) return

                        let obj = {
                            menu_url_dashboard: '',
                            menu_url_detail: '',
                            menu_url_rule: ''
                        };
                        result.data.forEach(v => {
                            company = v.menu_name_en;
                            for (let key in obj) {
                                // <li>
                                //     <a href="../..${v.menu_url_dashboard}&company=${v.menu_name_en}&nameEn=${v.menu_name_en}">
                                //         仪表盘
                                //         </a>
                                //         </li>
                                obj[key] += `
                                    <li>
                                        <a class="has-arrow" href="#" aria-expanded="false">
                                            <i class="fa fa-bar-chart-o"></i>
                                            <span class="hide-menu">${v.menu_name}</span>
                                        </a>
                                         <ul aria-expanded="false" class="collapse">
                                            <li>
                                                <a href="#/data/result_detail?company=${v.menu_name_en}" url="/data/result_detail?company=${v.menu_name_en}">
                                                   检核结果明细
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#/check/rule?company=${v.menu_name_en}" url="/check/rule?company=${v.menu_name_en}">
                                                    规则
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#/data/trend_analyse?company=${v.menu_name_en}" url="/data/trend_analyse?company=${v.menu_name_en}">
                                                    趋势分析
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#/data/data_check?company=${v.menu_name_en}" url="/data/data_check?company=${v.menu_name_en}">
                                                    数据质量检查报告
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                `;
                            }
                        });
                        $('#quality').after(obj.menu_url_dashboard);
                        resolve();
                    },
                });
            });
        };

        function initIframe() {
            $(".page-wrapper").append(`
                <iframe id="iframe" src="http://${window.location.host}/data/dashboard/" frameborder="0"></iframe>
            `);

            setTimeout(() => {
                let iframe = document.getElementById('iframe');
                iframe.onload = function () {
                    $('.page-loading').css('display', 'none');
                    if (iframe.contentWindow.document.getElementById('bg')) {   // 鉴权失败，重定向到login
                        window.location.href = `http://${window.location.host}/authorize/login`;
                    }
                };
            }, 0);
        }

        function initCheckedMenu() {
            let hash = window.location.hash;
            if (hash) {
                var ul = $("#sidebarnav").find(`a[href='${hash}']`).parent().parent();
                var a = ul.prev();
                var li = ul.parent();
                li.addClass('active');
                a.attr('aria-expanded', true);
                ul.addClass('in');
                $("#sidebarnav").find(`a[href='${hash}']`).click();
            } else {
                let firstMenu = $($("#sidebarnav a")[0]);
                firstMenu.parent().addClass('active');
                firstMenu.addClass('active');
            }
        }

        function changeMenu() {
            let iframe = document.getElementById('iframe');
            $("#sidebarnav a").each(function(i) {
                if ($(this).hasClass('active')) {
                    $(this).parent().removeClass('active');
                    $(this).removeClass('active');
                }
                $(this).click(function() {
                    if ($(this).hasClass('active')) return;

                    if (!$(this).hasClass('has-arrow')) {
                        $('.page-loading').css('display', 'flex');

                        let curActive = $("#sidebarnav a").filter('.active');
                        curActive.removeClass('active');
                        curActive.parent().removeClass('active');
                        $(this).addClass('active');
                        $(this).parent().addClass('active');

                        $(".page-wrapper iframe").attr('src', `http://${window.location.host}${$(this).attr('url')}`);

                        iframe.onload = function() {
                            $('.page-loading').css('display', 'none');
                        };
                    }
                });
            })
        }
    </script>
</div>
</body>
</html>